<template>
	<div class="register-container flx-center">
		<el-button class="to-login" color="#0b83b7" :icon="Back" size="small" round @click="toLogin">去登录</el-button>
		<SwitchDark class="dark" />
		<div class="register-box">
			<div class="register-form">
				<DetailsForm :info-form="userInfo" :is-register="true" title="用户注册" @handle-submit="submitRegister" />
			</div>
			<div class="register-left">
				<img src="@/assets/images/campus.jpg" alt="stopping" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="register">
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { Back } from "@element-plus/icons-vue";
import SwitchDark from "@/components/SwitchDark/index.vue";
import DetailsForm from "@/components/DetailsForm/index.vue";
import { Login } from "@/api/interface";
import { postRegister } from "@/api/modules/login";

const router = useRouter();
const userInfo = reactive({
	uid: "010371001",
	username: "注册",
	password: "",
	phone: "",
	mail: "",
	role: ""
});

const submitRegister = async (registerForm: Login.RegisterForm) => {
	const res = await postRegister(registerForm);
	console.log(res);
};
const toLogin = () => {
	router.push("/login");
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
